@import '../../../../common';

:host {
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-direction: row;
  height: 100%;
}

::ng-deep {
  .ant-select-item-empty {
    display: none !important;
  }
}

.save-search-form {
  nz-form-item {
    margin: 0;
  }

  [nz-input] {
    width: 250px;
  }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  overflow: hidden;
  height: 100%;

  .header {
    display: flex;
    flex-direction: row;

    [nz-form] {
      margin-left: 10px;
      flex: 1;
      display: flex;
      flex-direction: row;

      nz-form-item {
        margin: 0;
      }

      nz-form-item:first-child {
        flex: 1;
      }

      nz-form-item:not(last-child) {
        margin-right: 10px;
      }
    }
  }

  .run-list {
    margin: 20px 0;
    flex: 1;
    overflow-y: auto;

    nz-list-item {
      &.append {
        background-color: #f5f5f5;

        :host-context(.night) & {
          background-color: rgba(255, 255, 255, 0.08);
        }
      }
    }

    nz-list-item-meta {
      ::ng-deep {
        .ant-list-item-meta-content {
          width: unset !important;
        }
      }

      [nzCopyable] {
        color: inherit;

        ::ng-deep {
          .ant-typography-copy {
            color: inherit;
            margin: 0 2px 0 0;
          }

          &:hover {
            color: #177ddc;
          }
        }
      }
    }

    .dotted {
      color: inherit;
      text-decoration: underline dotted;
      white-space: nowrap;

      &:hover {
        color: #177ddc;
      }
    }

    .run-avatar {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 25px;
      height: 48px;

      [nz-icon] {
        font-size: 25px;

        &.success {
          color: $cds_color_green;
        }

        &.fail {
          color: $cds_color_red;
        }

        &.cancel {
          color: $polar_grey_2;
        }

        &.building {
          color: $cds_color_teal;
        }

        &.blocked {
          color: $cds_color_teal;
        }

        &.skipped {
          color: $polar_grey_2;
        }
        
        &.stopped {
          font-size: 21px;
          border: 2px solid $cds_color_red; 
          border-radius: 12px;
          color: $cds_color_red;
        }
      }
    }

    .annotations {
      flex: 1;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 10px;
      overflow: hidden;

      &>* {
        margin: 4px;
      }
    }

    [nz-list-item-actions] {
      text-align: right;
      margin: 0 0 0 10px;
      min-width: 120px;
    }
  }

  .footer {
    display: flex;
    flex-direction: row;
    align-items: center;

    nz-pagination {
      margin-left: auto;
    }

    nz-select {
      margin-left: 4px;

      ::ng-deep {
        .ant-select-selector {
          padding: unset;
        }

        .ant-select-arrow {
          right: 4px;
        }
      }
    }
  }
}